<template>
  <div class="search-bar">
    <input type="number" @focus="focus" @blur="blur" ref="input" v-model="playerId">
    <span class="placeholder" @click="setInputFocus" ref="placeholder">请填写要添加或删除的玩家ID</span>
    <button class="search_btn" @click="searchClick"></button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerId: ""
    };
  },
  methods: {
    focus() {
      this.$refs.placeholder.style.display = "none";
    },
    blur() {
      if (!this.playerId) {
        this.$refs.placeholder.style.display = "block";
      }
    },
    setInputFocus() {
      this.$refs.input.focus();
    },
    searchClick() {
      this.$emit("search", this.playerId);
    }
  }
};
</script>
<style scoped>
.search-bar {
  position: relative;
  padding: 0.15rem 0.25rem;
}
.placeholder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #6a6a6a;
  font-size: 0.28rem;
  width: 51%;
}
.search-bar input {
  border: 0.01rem solid #d7d7d7;
  border-radius: 0.3rem;
  font-size: 0.28rem;
  height: 0.6rem;
  padding-left: 0.2rem;
  width: 100%;
  word-wrap: none;
}
.search_btn {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: url("../../images/icon_chazhao.png");
  background-size: 100% 100%;
  height: 0.33rem;
  width: 0.33rem;
}
</style>

